<template>
<div class="content">
    <compExtend 
        :propsList="propsList"
        :tpl="tpl" :bindConfig="bindConfig"
    >
        <h2 class="subTitle">代码示例</h2>
        <Card dis-hover>
            <Form :labelWidth="100">
                <Row><Col :span="8" v-for="(item,index) in bindConfig.fieldList" :key="index">
                <FormItem :label="item.label">
                    <fieldCell :value="item.value" :config="item.config"></fieldCell>
                </FormItem>
                </Col></Row>
            </Form>
        </Card>
    </compExtend>
</div>
</template>

<script>
import compExtend from '../parts/compExtend'
export default {
    components: { compExtend },
    data() {
        let bindConfig = {
            fieldList: [
                {   
                    label: 'text', value: 'text1', 
                    config: {type: 'text', placeholder: '请输入', clearable: true} 
                },
                {   
                    label: 'select', value: 'option1', 
                    config: {type: 'select', options: [{label: 'option1', value: 'option1'},{label: 'option2', value: 'option2'} ], clearable: true} 
                },
                {   
                    label: 'date', value: new Date(), 
                    config: {type: 'date', clearable: true} 
                },
                {   
                    label: 'multiSelect', value: ['option2'], 
                    config: {type: 'multiSelect', options: [{label: 'option1', value: 'option1'},{label: 'option2', value: 'option2'} ], clearable: true} 
                },
            ],
        };
        let propsList = [
            {
                title: 'fieldCell',
                data: [
                    {
                        name: 'config', type: 'object', default: " {type: 'text'} ",
                        desc: `配置信息: </br>
                            type: '', 组件类型，支持iview所有的表单组件，同时扩展了一些新组件；
                            包括 <code>text、select、multipleSelect、check、switch、multiSelect</code>;
                            <div class="ivu-mt"></div>
                            其它属性: 支持iview对应组件的属性，比如常用的：<code>clearalbe、disbaled、placeholder</code>
                            更多属性可以参照iview对应的属性说明，如：<a href="http://v4.iviewui.com/components/input">Input</a>`,
                    },
                ]
            }
        ]
        let tpl = `<Form :labelWidth='100'> <FormItem v-for='(item,index) in bindConfig.fieldList' :key='index' :label='item.label'> <fieldCell :value='item.value' :config='item.config'></fieldCell> </FormItem> </Form>`

        return {
            tpl,
            bindConfig,
            propsList,
        }
    },
    methods: {
    },
    props: {
    }
}
</script>

<style scoped lang="less">
.content {
    /deep/ textarea.jsoneditor-text, /deep/ .ace-jsoneditor {
        min-height: 600px;
    }
}
</style>
